<template>
	<div>
		<!-- 搜索 -->
		<el-row :gutter="20">
			<el-col :span="8">
				<el-input placeholder="请输入内容" class="input-with-select" v-model="userparams.query">
					<el-button slot="append" icon="el-icon-search" @click="getUserlist"></el-button>
				</el-input>
			</el-col>
			<el-col :span="4">
				<zh-button color="primary" size="large" @click="ShowdialogVisible=true">添加用户</zh-button>
			</el-col>
		</el-row>
		<!-- 列表 -->
		<el-table border style="width: 100%" :data="userlist">
			<el-table-column label="#" type="index" width="48">
			</el-table-column>
			<el-table-column prop="username" label="姓名">
			</el-table-column>
			<el-table-column prop="email" label="邮箱">
			</el-table-column>
			<el-table-column prop="mobile" label="电话">
			</el-table-column>
			<el-table-column prop="role_name" label="角色">
			</el-table-column>
			<el-table-column label="状态">
				<template slot-scope="scope">
					<zh-switch v-model="scope.row.mg_state" @change="changeSwitch(scope.row)" activeColor="#13ce66"
						inActiveColor="#ff4949"></zh-switch>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<div style="display: flex;">
						<!-- 修改 -->
						<zh-button size="mini" color="primary" icon="edit" @click="ShoweditDialog(scope.row)">
						</zh-button>
						<!-- 删除 -->
						<zh-button size="mini" color="red" icon="delete" @click="DelConfirm(scope.row.id)">
						</zh-button>
						<!-- 权限 -->
						<el-tooltip class="item" effect="dark" content="分配权限" placement="top">
							<zh-button size="mini" color="orange" icon="Settingscontroloptions" ></zh-button>
						</el-tooltip>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<zh-pagination background :pageSizes="[4,6,8,10]" :total="totals" @changed="changePage" :showPages="7"
		:layouts="['next','prev','pages','goto','info']" :pageSize="userparams.pagesize">
		</zh-pagination>


		<!-- 添加用户对话框 -->
		<el-dialog title="添加用户" :visible.sync="ShowdialogVisible" width="50%" @close="addClose">
			<el-form label-width="70px" :model="addForm" :rules="addFormRules" ref="addFormRef">
				<el-form-item label="用户名" prop="username">
					<el-input v-model="addForm.username"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="addForm.password"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
					<el-input v-model="addForm.email"></el-input>
				</el-form-item>
				<el-form-item label="电话" prop="mobile">
					<el-input v-model="addForm.mobile"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer" style="display: flex;justify-content: flex-end;">
				<zh-button color="orange" @click="ShowdialogVisible = false">取 消</zh-button>
				<zh-button color="primary" @click="addUser">确 定</zh-button>
			</span>
		</el-dialog>

		<!-- 编辑用户对话框 -->
		<el-dialog title="编辑用户" :visible.sync="editdialogVisible" width="50%" @close="editClose">
			<el-form label-width="70px" :model="editForm" :rules="editFormRules" ref="editFormRef">
				<el-form-item label="用户名" prop="username">
					<el-input v-model="editForm.username" disabled></el-input>
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
					<el-input v-model="editForm.email"></el-input>
				</el-form-item>
				<el-form-item label="电话" prop="mobile">
					<el-input v-model="editForm.mobile"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer" style="display: flex;justify-content: flex-end;">
				<zh-button color="orange" @click="editdialogVisible = false">取 消</zh-button>
				<zh-button color="primary" @click="editUser">确 定</zh-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		// 组件名称
		name: 'demo',
		// 组件参数 接收来自父组件的数据
		props: [],
		// 局部注册的组件
		components: {},
		// 组件状态值
		data() {
			return {
				// 用户列表数据
				userlist: [],
				userparams: {
					query: "",
					pagenum: 1,
					pagesize: 4,
				},
				// 总条数
				totals: 10,
				// 控制对话框显示隐藏
				ShowdialogVisible: false,
				// 用户添加
				addForm: {
					username: "",
					password: "",
					email: "",
					mobile: "",
				},
				// 校验规则
				addFormRules: {
					username: [{
						required: true,
						message: "用户名不能为空",
						trigger: "blur"
					}, {
						min: 3,
						max: 5,
						message: "长度在3~10个字符之间",
						trigger: "blur"
					}],
					password: [{
						required: true,
						message: "密码不能为空",
						trigger: "blur"
					}, {
						min: 6,
						max: 15,
						message: "长度在6~15个字符之间",
						trigger: "blur"
					}],
					email: [{
						validator(rule, value, callback) {
							value = value.trim();
							if (value === "") {
								return callback(new Error('请输入邮箱'))
							}
							if (!/^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/.test(
									value)) {
								return callback(new Error("请输入合法的邮箱"))
							}
							callback();
						},
						trigger: "blur"
					}],
					mobile: [{
						validator(rule, value, callback) {
							value = value.trim();
							if (value === "") {
								return callback(new Error('请输入手机号'))
							}
							if (!/^1[3456789]\d{9}$/.test(value)) {
								return callback(new Error("请输入正确的手机号"))
							}
							callback();
						},
						trigger: 'blur'
					}]
				},
				// 用户修改
				editForm: {
					id: '',
					username: "",
					email: "",
					mobile: "",
				},
				editdialogVisible: false,
				// 校验规则
				editFormRules: {
					email: [{
						validator(rule, value, callback) {
							value = value.trim();
							if (value === "") {
								return callback(new Error('请输入邮箱'))
							}
							if (!/^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/.test(
									value)) {
								return callback(new Error("请输入合法的邮箱"))
							}
							callback();
						},
						trigger: "blur"
					}],
					mobile: [{
						validator(rule, value, callback) {
							value = value.trim();
							if (value === "") {
								return callback(new Error('请输入手机号'))
							}
							if (!/^1[3456789]\d{9}$/.test(value)) {
								return callback(new Error("请输入正确的手机号"))
							}
							callback();
						},
						trigger: 'blur'
					}]
				}
			}
		},
		// 组件方法
		methods: {
			// 获取列表数据
			async getUserlist() {
				try {
					const data = await this.$apis.getUser(this.userparams);
					this.userlist = data.data1.users;
					this.totals = data.data1.total;
					console.log(data)
				} catch (e) {
					console.log(e)
				}
			},
			// 用户添加
			async addUser() {
				try {
					await this.$refs.addFormRef.validate();
					this.ShowdialogVisible = false
					try {
						const data = await this.$apis.getaddUser(this.addForm);
						this.getUserlist()
						this.$message.success(data.msg)
					} catch (e) {
						this.$message.error(e)
					}
				} catch (e) {
					console.log(e)
				}
			},
			// 监听对话框的关闭
			addClose() {
				this.$refs.addFormRef.resetFields();
			},
			// 修改用户状态
			async changeSwitch(row) {
				try {
					const data = await this.$apis.getStatus(row.id, row.mg_state);
					this.$message.success(data.msg)
					this.getUserlist();
				} catch (e) {
					this.$message.error(e)
				}
			},
			// 修改用户
			ShoweditDialog(row) {
				this.editdialogVisible = true;
				this.editForm = row;
			},
			async editUser() {
				try {
					await this.$refs.editFormRef.validate();
					this.editdialogVisible = false;
					try {
						const data = await this.$apis.getEditUser(this.editForm)
						this.getUserlist();
						this.$message.success(data.msg)
					} catch (e) {
						this.$message.error(e)
					}
				} catch (e) {
					console.log(e)
				}
			},
			// 监听对话框的关闭
			editClose() {
				this.$refs.editFormRef.resetFields();
			},
			// 获取删除用户的数据
			async removeUser(id) {
				try {
					const data = await this.$apis.getDelUser(id);
					this.getUserlist();
				} catch (e) {
					console.log(e)
				}
			},
			// 删除
			async DelConfirm(id) {
				try {
					await this.$confirm('是否删除', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.removeUser(id);
						this.$message.success("删除成功")
					}).catch(() => {
						this.$message.info('已取消删除')
					})
				} catch (e) {
					console.log(e)
				}
			},

			// 分页
			changePage(selectNo, pagesize1) {
				// 改变页码
				this.userparams.pagenum = selectNo;
				// 改变每页条数
				this.userparams.pagesize = pagesize1;
				this.getUserlist();
			}
		},
		/**
		 * 组件实例创建完成
		 */
		created() {
			this.getUserlist();
		},
	}
</script>

<style lang="scss" scoped>
</style>
